<template>
  <div>
    <food-detail
      v-if="detailVisible"
      @hide="hideDetail"
      :detailId="detailidid"
    ></food-detail>
    <div class="goods">
      <div class="menu-wrapper">
        <ul>
          <li
            class="menu-item"
            v-for="(item, index) in goods"
            :key="index"
            :class="{ current: currentIndex === index }"
            @click="selectMenu(index)"
          >
            <span class="text">
              {{ item.name }}
            </span>
          </li>
        </ul>
      </div>
      <div class="foods-wrapper" ref="foodsWrapper">
        <ul>
          <li class="food-list" v-for="(foodlist, index) in goods" :key="index">
            <div class="title">
              <h1 class="maintitle">{{ foodlist.name }}</h1>
              <h2 class="subtitle">{{ foodlist.remark }}</h2>
            </div>
            <ul>
              <li
                class="food-item"
                v-for="(fooditem, index) in list"
                :key="index"
                :detailId="index"
              >
                <div
                  class="items"
                  v-if="foodlist.id === fooditem.categoryId"
                  @click="showDetail(fooditem.id)"
                >
                  <div class="icon">
                    <img :src="fooditem.pic" alt="" />
                  </div>
                  <div class="content" style="width: 120px">
                    <h2 class="name">{{ fooditem.name }}</h2>
                    <p class="desc">{{ fooditem.characteristic }}</p>
                    <p class="desc">默认：大/单糖/热</p>
                    <div class="extra">
                      <span class="specification"></span>
                    </div>
                    <div class="price" v-if="fooditem.minPrice">
                      <span class="now">￥{{ fooditem.minPrice }}</span>
                      <span class="old">￥{{ fooditem.originalPrice }}</span>
                    </div>
                    <div class="price" v-if="fooditem.minPrice === 0">
                      <span class="now">￥{{ fooditem.originalPrice }}</span>
                    </div>
                  </div>
                </div>
                <van-stepper
                  input-width="18px"
                  button-size="18px"
                  class="goods-mount"
                  v-model="value"
                  theme="round"
                  disable-input
                  button-round-theme-color="blue"
                  v-if="foodlist.id === fooditem.categoryId"
                />
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoods, getGoodsLists } from "@/api";
import foodDetail from "@/views/toolbar/category/foodsDetail/foodDetail";
// import CartControl from "../../../components/cart-control.vue/cart-control.vue"
// import BScroll from 'better-scroll'

export default {
  data() {
    return {
      goods: [],
      list: [],
      currentIndex: 0,
      detailVisible: false,
    };
  },
  created() {
    // getGoods().then((res) => {
    //   console.log(res);
    //   this.goods = res;
    //   // this.$nextTick(() => {  //这个函数一定会在页面渲染完成之后才执行
    //   //   this._initScroll()
    //   // })
    // });
    this.goods = getGoods.data;
    console.log(this.goods);
    getGoodsLists().then((res) => {
      console.log(res);
      this.list = res;
    });
  },
  components: {
    foodDetail,
    // CartControl
  },
  computed: {},
  methods: {
    selectMenu(e) {
      this.currentIndex = e;
    },
    showDetail(e) {
      this.detailVisible = true;
      this.detailidid = e;
    },
    hideDetail(e) {
      this.detailVisible = e;
    },
    // _initScroll(){
    //   this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{
    //     click:true,
    //     probeType: 3
    //   })
    // }
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style-type: none;
}
.van-stepper--round .van-stepper__plus {
  color: var(--van-white);
  background-color: #232573;
}
.van-stepper--round .van-stepper__minus {
  color: #232573;
  background-color: var(--van-white);
  border: 1px solid #232573;
}
.goods {
  display: flex;
  position: absolute;
  top: 177px;
  bottom: 46px;
  width: 100%;
  overflow: hidden;
  .menu-wrapper {
    flex: 0 0 90px;
    width: 90px;
    background: #f8f8f8;
    .menu-item {
      display: flex;
      width: 67.5px;
      height: 44px;
      padding: 0 10px;
      text-align: center;
      justify-content: center;
      align-items: center;
      line-height: 14px;
      font-size: 12px;
      border-bottom: 1px solid #f2f2f2;
    }
    .menu-item.current {
      background: #fff;
      font-weight: 700;
    }
  }
  .foods-wrapper {
    list-style-type: none;
    flex: 1;
    padding-left: 15px;
    margin-top: 15px;
    overflow: auto;
    .title {
      list-style-type: none;
      // margin-top: 18px;
      .maintitle {
        font-size: 14px;
        font-weight: 600;
      }
      .subtitle {
        font-size: 10px;
        color: #a6a6a6;
        font-weight: normal;
        margin-bottom: 20px;
      }
    }
    .food-item {
      list-style-type: none;
      display: flex;
      position: relative;
      .items {
        display: flex;
        position: relative;
        .icon {
          width: 70px;
          height: 90px;
          img {
            width: 70px;
            height: 70px;
            overflow: hidden;
          }
        }
        .content {
          margin-left: 10px;
          .name {
            font-size: 15px;
            color: #383838;
            font-weight: 600;
          }
          .desc {
            color: #a6a6a6;
            font-size: 11px;
          }
          .price {
            font-size: 15px;
            font-weight: 600;
            margin-top: 5px;
            .old {
              margin-left: 3px;
              text-decoration: line-through;
              font-size: 10px;
              color: #808080;
            }
          }
          .goods-mount {
            float: right;
          }
        }
      }
    }
    .goods-mount {
      margin-top: 60px;
    }
  }
}
</style>